<script type="text/x-template" id="mock-test-api-form">
    <div>
        <el-form ref="mockTestModelForm" :rules="rules"  :model="mockTestModel" label-width="170px">
            <el-form-item label="请求url" prop="url"  >
                <el-autocomplete style="width: 60%"
                                 class="inline-input"
                                 v-model="mockTestModel.url"
                                 :fetch-suggestions="querySearch"
                                 placeholder="/v1/panel/save.html"
                ></el-autocomplete>
            </el-form-item>
            <el-form-item label="请求参数" prop="requestParams">
                <el-input
                        type="textarea"
                        v-model="mockTestModel.requestParams"
                        :rows="6"
                        placeholder="请输入保存的json字符串"
                        clearable
                >
            </el-form-item>
            <el-form-item >
                <el-button type="primary" @click="handleSubmit('mockTestModelForm')" style="width: 200px">提交</el-button>
                <el-button @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</script>

<script>
    Vue.component('mock-test-api-form', {
        template: '#mock-test-api-form',
        data() {
            return {
                urls:{
                    testLoginUrl: '/v1/userlogin.html' //admin后台登录接口
                },
                restaurants:[],
                mockTestModel: {
                    url: '',
                    requestParams: '',
                },
                rules: {
                    url: [
                        {required: true, message: '请输入请求url'}
                    ],
                    requestParams: [
                        {required: true, message: '请输入保存的json字符串'}
                    ],
                }
            }
        },
        computed: {},
        methods: {
            querySearch(queryString, cb) {
                var restaurants = this.restaurants;
                var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
                // 调用 callback 返回建议列表的数据
                cb(results);
            },
            createFilter(queryString) {
                return (restaurant) => {
                    return (restaurant.label.indexOf(queryString) === 0);
                };
            },
            loadAll() {
                return [
                    { "value": "/v1/panel/save.html", "label": "板块保存接口" },
                    { "value": "/v1/tab/save.html", "label": "版面保存接口" },
                    { "value": "/v1/homepage/save.html", "label": "首页保存接口" },
                    { "value": "/v1/module/save.html", "label": "模块保存接口" },
                    { "value": "/v1/policyGroup/save.html", "label": "策略组保存接口" }
                ];
            },
            resetForm: function(){
                //重置按钮
                this.$refs.mockTestModelForm.resetFields();
            },
            handleSubmit: function () {
                this.$refs.mockTestModelForm.validate(function (valid) {
                    if (valid) {
                        alert(JSON.stringify(this.mockTestModel))
                        this.mockData()
                    } else {
                        this.$message('请将表单填写完整');
                    }
                }.bind(this));
            },
            mockData() {
                var user = 'yuanjunnan';
                var pass = 'yuanjunnan@yjn@';
                var requestOptions = {
                    url: this.urls.testLoginUrl,
                    data: {
                        username: user,
                        password: pass
                    }
                }
                this.ccAjax(requestOptions).done(function (data) {
                    if (data.code == 0) {
                        this.ajax(this.mockTestModel.url, {
                            jsonStr: this.mockTestModel.requestParams
                        }, function (result) {
                            if (result.code == 0) {
                                this.$message({
                                    type: 'success',
                                    message: "操作成功！"
                                })
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: result.msg
                                })
                            }
                        }.bind(this))
                    }
                }.bind(this));
            },
        },
        mounted() {
            this.restaurants = this.loadAll();
        },
        created() {
        }
    })
</script>
<style>
    .select-option{
    div{
        width:200px;
    }
    }
</style>
